<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="form"
    >
      <el-form-item :label="$t('file')" prop="file">
        <el-upload
          class="ky-file-list"
          :multiple="true"
          ref="upload"
          :action="action"
          :file-list="fileList"
          :auto-upload="false"
          :accept="accepts"
          :on-remove="handleFileChange"
          :on-change="handleFileChange"
        >
          <el-button slot="trigger" size="small" class="kylin-button"
            >选取文件</el-button
          >
          <div slot="tip" class="el-upload__tip">
            {{
              dialogType === "repo"
                ? "只能上传rpm或tar.gz文件"
                : this.origin != "cvelist"
                ? "只能上传xml或tar.gz文件"
                : "只能上传tar.gz文件"
            }}
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button class="kylin-button" @click="handleOk" v-loading="loading"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import { importRepo, importCVE, importCVElist } from "@/api/patch";
import { successOrError } from "@/utils";
export default {
  props: {
    dialogType: {
      type: String,
    },
    display: {
      type: Boolean,
      default: false,
    },
    origin: {
      type: String,
    },
  },
  computed: {
    accepts() {
      let accept = "";
      switch (this.dialogType) {
        case "repo":
          accept = ".rpm, .tar.gz";
          break;
        case "CVE":
          if (this.origin === "cvelist") {
            accept = ".tar.gz";
          } else {
            accept = ".xml, .tar.gz";
          }
          break;
        default:
          break;
      }
      return accept;
    },
  },
  data() {
    let checkFile = (rule, value, callback) => {
      if (this.fileList.length < 1) {
        callback(new Error(this.$t("file_require")));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      title: "",
      action: "#",
      fileList: [],
      form: {},
      rules: {
        file: [
          {
            validator: checkFile,
            trigger: "change",
            required: true,
          },
        ],
      },
    };
  },
  methods: {
    handleCancel() {
      this.resetForm();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = new FormData();
          this.fileList.forEach((item) => {
            data.append("file", item.raw);
          });
          switch (this.dialogType) {
            case "repo":
              importRepo({
                id: this.$route.params.id,
                id2: this.$route.query.id2 || this.$route.query.repoId,
                data,
              }).then((res) => {
                this.loading = false;
                if (res.data.code == "0") {
                  this.fileList = [];
                }
                if (res.data.data && res.data.data[0].id) {
                  this.$router.push({
                    name: "log_detail",
                    params: { id: res.data.data[0].id },
                  });
                }
              });
              break;

            case "CVE":
              if (this.origin === "cvelist") {
                importCVElist(data).then((res) => {
                  this.loading = false;
                  if (res.data.code == "0") {
                    this.fileList = [];
                    this.$message({
                      type: "success",
                      message: res.data.message,
                    });
                    this.$emit("click", "success");
                  } else {
                    this.$message({
                      type: "error",
                      message: res.data.message
                        ? res.data.message
                        : res.data.code,
                    });
                  }
                });
              } else {
                importCVE({
                  id: this.$route.params.id,
                  id2: this.$route.query.id2 || this.$route.query.repoId,
                  data,
                }).then((res) => {
                  if (res.data.code == "0") {
                    this.fileList = [];
                    this.$message({
                      type: "success",
                      message: res.data.message,
                    });
                    this.$emit("click", "success");
                  } else {
                    this.$message({
                      type: "error",
                      message: res.data.message
                        ? res.data.message
                        : res.data.code,
                    });
                  }
                  this.loading = false;
                });
              }
              break;

            default:
              break;
          }
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.fileList = [];
    },
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.form {
  width: 80%;
  margin: 0 auto;
}
.ky-file-list {
  .el-upload-list.el-upload-list--text {
    overflow-y: scroll;
    max-height: 200px;
  }
}
</style>